<template>
  <div class="ict">
    <!-- 首页头部 -->
    <div class="type">
      长源灯饰
      <router-link to="/home/search"
        ><span class="iconfont">&#xe86e;</span></router-link
      >
    </div>
    <!-- 组件 -->
    <banner></banner>
    <!-- 类别版块1 -->
    <div class="leibie">
      <div class="top">
        <img src="../assets/img/f.png" alt="" />
      </div>
      <div class="small">
        <router-link
          :to="{ path: '/home/type', query: { type: 'xd', muban: '1' } }"
        >
          <img src="../assets/img/x01.png" alt="" />
          <p>现代简约</p>
        </router-link>
        <router-link
          :to="{ path: '/home/type', query: { type: 'bo', muban: '1' } }"
        >
          <img src="../assets/img/x02.png" alt="" />
          <p>北欧后现代</p>
        </router-link>
        <router-link
          :to="{ path: '/home/type', query: { type: 'qs', muban: '1' } }"
        >
          <img src="../assets/img/x03.png" alt="" />
          <p>轻奢风格</p>
        </router-link>
        <router-link
          :to="{ path: '/home/type', query: { type: 'xzs', muban: '1' } }"
        >
          <img src="../assets/img/x04.png" alt="" />
          <p>新中式风格</p>
        </router-link>
        <router-link
          :to="{ path: '/home/type', query: { type: 'os', muban: '1' } }"
        >
          <img src="../assets/img/x05.png" alt="" />
          <p>欧式风格</p>
        </router-link>
        <router-link
          :to="{ path: '/home/type', query: { type: 'ms', muban: '1' } }"
        >
          <img src="../assets/img/x06.png" alt="" />
          <p>美式风格</p>
        </router-link>
        <router-link
          :to="{ path: '/home/type', query: { type: 'zs', muban: '1' } }"
        >
          <img src="../assets/img/x07.png" alt="" />
          <p>中式木艺</p>
        </router-link>
        <router-link
          :to="{ path: '/home/type', query: { type: 'rs', muban: '1' } }"
        >
          <img src="../assets/img/x08.png" alt="" />
          <p>日本/东南亚</p>
        </router-link>
      </div>
    </div>
    <!-- 类别版块2 -->
    <div class="leibie">
      <div class="top">
        <img src="../assets/img/plogo.png" alt="" />
      </div>
      <div class="small">
        <router-link :to="{ path: '/home/type', query: { type: 'xdd' } }">
          <img src="../assets/img/p01.png" alt="" />
          <p>吸顶灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'dd' } }">
          <img src="../assets/img/p02.png" alt="" />
          <p>吊灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'fsd' } }">
          <img src="../assets/img/p03.png" alt="" />
          <p>风扇灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'bd' } }">
          <img src="../assets/img/p04.png" alt="" />
          <p>壁灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'td' } }">
          <img src="../assets/img/p05.png" alt="" />
          <p>台灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'ldd' } }">
          <img src="../assets/img/p06.png" alt="" />
          <p>落地灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'pbd' } }">
          <img src="../assets/img/p07.png" alt="" />
          <p>平板灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'jqd' } }">
          <img src="../assets/img/p08.png" alt="" />
          <p>镜前灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'td' } }">
          <img src="../assets/img/p09.png" alt="" />
          <p>筒灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'gd' } }">
          <img src="../assets/img/p10.png" alt="" />
          <p>轨道灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'yb' } }">
          <img src="../assets/img/p11.png" alt="" />
          <p>浴霸</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'kg' } }">
          <img src="../assets/img/p12.png" alt="" />
          <p>开关</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'bgd' } }">
          <img src="../assets/img/p13.png" alt="" />
          <p>办公灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'tynd' } }">
          <img src="../assets/img/p14.png" alt="" />
          <p>太阳能灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'hwd' } }">
          <img src="../assets/img/p15.png" alt="" />
          <p>户外灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'dd' } }">
          <img src="../assets/img/p16.png" alt="" />
          <p>灯带</p>
        </router-link>
      </div>
    </div>
    <!-- 类别版块3 -->
    <div class="leibie">
      <div class="top">
        <img src="../assets/img/klogo.png" alt="" />
      </div>
      <div class="small">
        <router-link :to="{ path: '/home/type', query: { type: 'ktd' } }">
          <img src="../assets/img/k01.png" alt="" />
          <p>客厅灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'ctd' } }">
          <img src="../assets/img/k02.png" alt="" />
          <p>餐厅灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'wsd' } }">
          <img src="../assets/img/k03.png" alt="" />
          <p>卧室灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'wtd' } }">
          <img src="../assets/img/k04.png" alt="" />
          <p>儿童灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'sfd' } }">
          <img src="../assets/img/k05.png" alt="" />
          <p>书房灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'gdd' } }">
          <img src="../assets/img/k06.png" alt="" />
          <p>过道灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'ttd' } }">
          <img src="../assets/img/k07.png" alt="" />
          <p>阳台灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'cwd' } }">
          <img src="../assets/img/k08.png" alt="" />
          <p>厨卫灯</p>
        </router-link>
      </div>
    </div>
    <!-- 大海报 -->
    <div class="cj">
      <img src="../assets/img/big2.png" alt="" />
    </div>
    <!-- 尾部 -->
    <div class="floot">
      <div>
        <span class="iconfont">&#xe637;</span>
        <p>2年质保</p>
      </div>
      <div>
        <span class="iconfont">&#xe69f;</span>
        <p>一件发货</p>
      </div>
      <div>
        <span class="iconfont">&#xe7db;</span>
        <p>赠送光源</p>
      </div>
      <div>
        <span class="iconfont">&#xe63d;</span>
        <p>七天包换</p>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.ict {
  width: 100%;
  overflow: hidden;
  margin-bottom: 70px;
  // 头部
  .type {
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9999;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    color: rgb(116, 116, 116);
    text-align: center;
    background-color: white;
    span {
      position: absolute;
      display: block;
      height: 50px;
      width: 40px;
    }
    a {
      display: block;
      span {
        position: absolute;
        display: block;
        height: 50px;
        color: rgb(116, 116, 116);
        font-size: 25px;
        width: 40px;
        right: 0;
        top: 0;
      }
    }
  }
  // 类别
  .leibie {
    width: 100%;
    .top {
      width: 60%;
      margin: 0 auto;
      img {
        margin: 0 auto;
        text-align: center;
      }
    }
    .small {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      a {
        width: 20%;
        margin: 2.5%;
        display: block;
        text-align: center;
        img {
          width: 60px;
          height: 60px;
          align-items: center;
        }
        p {
          font-size: 12px;
        }
      }
    }
  }
  // 海报
  .cj {
    margin-top: 40px;
    width: 100%;
    img {
      width: 100%;
    }
  }
  // 页脚
  .floot {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin: 40px 0 80px 10px;
    div {
      padding: 0 15px;
      text-align: center;
      border-left: 1px solid #ccc;
      span {
        font-size: 20px;
        color: rgb(49, 77, 88);
      }
      p {
        margin-top: 8px;
        font-size: 14px;
        color: rgb(53, 53, 53);
      }
    }
    div:nth-child(1) {
      border: none;
    }
  }
}
</style>
<script>
import banner from "@/components/banner.vue";
export default {
  name: "ification",
  // 注册组件
  components: {
    banner,
  },
};
</script>